<!--
 * @Author: Charsen
 * @Date: 2025-08-01 18:00
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-31 15:52:12
 * @Description: 
-->
<template>
  <div v-if="localActions.length > 0" class="list-actions">
    <div v-for="(module, mi) in localActions" :key="mi" class="module">
      <div class="module-name color-warning">{{ mi + 1 }}. {{ module.label }}</div>
      <div v-for="(controller, ci) in module.children" :key="ci" class="controller">
        <div>
          <el-checkbox
            v-model="controller.checked_all"
            :indeterminate="controller.indeterminate"
            class="controller-name"
            @change="handleCheckAllChange(mi, ci)"
          >
            {{ mi + 1 }}.{{ ci + 1 }} {{ controller.label }}
          </el-checkbox>
        </div>
        <el-checkbox-group
          v-model="controller.checked"
          @change="handleCheckedActionsChange(mi, ci)"
        >
          <div class="actions">
            <el-checkbox
              v-for="action in controller.children"
              :key="action.id"
              :label="action.id"
              class="checkbox"
            >
              {{ action.label }}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="save-button">
      <el-button :loading="saveLoading" type="primary" round @click="handleSaveActions">
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { api } from '#/api'
  import { Http } from '#/utils/http'
  import { ElMessage } from 'element-plus'

  defineOptions({
    name: 'Actions',
  })

  const props = defineProps<{
    allActions: any[]
    currentRole?: any
  }>()

  const saveLoading = ref(false)

  // 创建本地副本用于编辑
  const localActions = ref<any[]>([])

  // 监听 props 变化，更新本地副本
  watch(
    () => props.allActions,
    (newActions) => {
      localActions.value = structuredClone(newActions)
    },
    { immediate: true, deep: true }
  )

  const handleCheckAllChange = (module_index: number, controller_index: number) => {
    const controller = localActions.value[module_index].children[controller_index]

    controller.checked = controller.checked_all ? [...controller.children_ids] : []
    controller.indeterminate = false
  }

  const handleCheckedActionsChange = (module_index: number, controller_index: number) => {
    const controller = localActions.value[module_index].children[controller_index]
    const checkedCount = controller.checked.length
    const totalCount = controller.children_ids.length

    controller.checked_all = checkedCount === totalCount
    controller.indeterminate = checkedCount > 0 && checkedCount < totalCount
  }

  const handleSaveActions = () => {
    if (saveLoading.value) return
    saveLoading.value = true

    Http.Put({
      url: api.Auth.updateActions(props.currentRole.id),
      data: { role_actions: localActions.value },
    })
      .then(() => {
        ElMessage({ type: 'success', message: '保存成功' })
      })
      .finally(() => {
        saveLoading.value = false
      })
  }
</script>

<style lang="scss" scoped>
  .list-actions {
    padding: 0 20px 40px 30px;

    .module {
      padding-top: 20px;
      margin: 0 0 40px;
      border-top: 1px solid #ebeef5;
    }

    .module-name {
      font-size: 16px;
      font-weight: bold;
    }

    .controller {
      margin: 20px 0 0 30px;
    }

    .controller-name {
      font-size: 14px;
      font-weight: bold;
    }

    .actions {
      display: flex;
      flex-flow: row wrap;
      margin: 10px 0 0 30px;

      .checkbox {
        width: 20%;
        padding: 10px;
        margin: 0;
        color: #909399;
        border-radius: 5px;

        &:hover {
          background: #f6f8fc;
        }
      }
    }
  }

  .save-button {
    padding: 20px 20px 0 0;
    text-align: right;
    border-top: 1px solid #ebeef5;
  }
</style>
